<%@page import="com.etc.zzsys.entiy.Users"%>
<%@page import="java.util.List"%>
<%@page import="com.etc.zzsys.service.impl.UsersServiceImpl"%>
<%@page import="com.etc.zzsys.service.UsersService"%>
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">

<title>用户列表</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/dashboard.css" rel="stylesheet">

</head>

<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">问答系统后台</a>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">仪表盘</a></li>
					<li><a href="#">设置</a></li>

					<li><a href="#">帮助</a></li>
				</ul>
				<form class="navbar-form navbar-right">
					<input type="text" class="form-control" placeholder="搜搜...">
				</form>
			</div>
		</div>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<ul class="nav nav-sidebar">
					<li><a href="mainPage.jsp">首页 <span class="sr-only">(current)</span></a>
					</li>
					<li class="active"><a href="users.jsp">用户列表</a></li>
					<li><a href="addUsers.jsp">新增用户</a></li>
					<li><a href="users_ajax.jsp">用户列表Ajax</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><a href="qs.action?op=queryquestion">问题列表</a></li>
					<li><a href="addQuestion.jsp">新增问题</a></li>
					<li><a href="qs.action?op=queryquestion_jstl">问题列表[jstl]</a></li>
					<li><a href="">答案管理</a></li>
					<li><a href="as.action?op=queryansByPage">答案管理[page]</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><a href="">系统设置</a></li>
				</ul>
			</div>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<h2 class="sub-header">用户列表<input type="button" id="b1" value="ajax请求" /></h2>
				
				<div class="table-responsive">
					<table class="table table-striped table-hover">
						<thead>
							<tr class="text-center">
								<th>编号</th>
								<th>昵称</th>
								<th>性别</th>
								<th>手机号</th>
								<th>地址</th>
								<th>等级</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>

						</tbody>
					</table>
				</div>
			</div>
		</div>

		<!-- 这里放我们的遮罩层 -->
		<div class="row clearfix">
			<div class="col-md-12 column">


				<div class="modal fade" id="modal-container-534629" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<!-- 通过样式设置层的宽度 -->
					<div class="modal-dialog" style="width: 900px">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-hidden="true">×</button>
								<h4 class="modal-title" id="myModalLabel">修改用户</h4>
							</div>
							<!-- 表单开始  action ="url" 一个动态可以接受当前表单数据的地址  xx.php /xx.jsp /xx.action xx.do 某个servlet文件... -->
							<form class="form-horizontal" role="form" action="us.do"
								method="post">
								<div class="modal-body">

									<div class="form-group">
										<label for="userName" class="col-sm-2 control-label">用户名</label>
										<div class="col-sm-8">
											<input type="hidden" name="op" value="update" /> <input
												type="hidden" name="userId" id="userId" /> <input
												type="text" required="required" class="form-control"
												name="userName" id="userName" />
										</div>
									</div>

									<div class="form-group">
										<label for="userSex" class="col-sm-2 control-label">性别</label>
										<div class="col-sm-2">
											<select class="form-control" name="userSex" id="userSex">
												<option value="男">男</option>
												<option value="女">女</option>
											</select>
										</div>
									</div>

									<div class="form-group">
										<label for="userTel" class="col-sm-2 control-label">手机号码</label>
										<div class="col-sm-8">
											<input type="text" required="required" class="form-control"
												name="userTel" id="userTel" />
										</div>
									</div>

									<div class="form-group">
										<label for="userAddress" class="col-sm-2 control-label">地址</label>
										<div class="col-sm-8">
											<input type="text" required="required" class="form-control"
												name="userAddress" id="userAddress" />
										</div>
									</div>

									<div class="form-group">
										<label for="userLevel" class="col-sm-2 control-label">角色</label>
										<div class="col-sm-2">
											<select class="form-control" name="userLevel" id="userLevel">
												<option value="0">管理员</option>
												<option value="1">普通用户</option>
											</select>
										</div>
									</div>

									<div class="form-group">
										<label for="userLevel" class="col-sm-2 control-label">用户状态</label>
										<div class="col-sm-2">
											<select class="form-control" name="userState" id="userState">
												<option value="1">启用</option>
												<option value="0">禁用</option>
											</select>
										</div>
									</div>

								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default"
										data-dismiss="modal">关闭</button>
									<button type="submit" class="btn btn-primary">保存</button>
								</div>

							</form>
							<!-- 表单结束 -->

						</div>

					</div>

				</div>

			</div>
		</div>

		<!-- 遮罩层的结束 -->

	</div>

	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>

	<!-- 删除的按钮 -->
	<script type="text/javascript">
		$(function() {

			// 事件 class为del的按钮的事件
			$(".del").click(function() {

				var flag = confirm("是否确定删除？删除的数据将不可恢复.");
				if (flag == true) {
					//$(this) 当前的按钮的文本
					//$(this).parents("tr") 当前行对象
					//$(this).parents("tr").find("td") 找当前行的列td
					//$(this).parents("tr").find("td").eq(0) 当前行的第一个td
					alert($(this).parents("tr").find("td").eq(0).text());
					var userId = $(this).parents("tr").find("td").eq(0).text()
					//将这个结果 传递给servlet
					location.href = "us.do?op=del&userId=" + userId;
				}
			});

			// 事件 class为update的按钮的事件
			$(".update").click(
					function() {
						var userId = $(this).parents("tr").find("td").eq(0)
								.text();
						var userName = $(this).parents("tr").find("td").eq(1)
								.text();
						var userSex = $(this).parents("tr").find("td").eq(2)
								.text();
						var userTel = $(this).parents("tr").find("td").eq(3)
								.text();
						var userAddress = $(this).parents("tr").find("td")
								.eq(4).text();
						var userLevel = $(this).parents("tr").find("td").eq(5)
								.text();
						var userState = $(this).parents("tr").find("td").eq(6)
								.text();
						console.log(userId + "," + userName + "," + userSex
								+ "," + userTel);
						//使用jquery代码将信息 显示在form的元素中
						$("#userId").val(userId);
						$("#userName").val(userName);
						$("#userSex").val(userSex);
						$("#userTel").val(userTel);
						$("#userName").val(userName);

						$("#userAddress").val(userAddress);
						$("#userLevel").val(userLevel == "管理员" ? 0 : 1);
						$("#userState").val(userState == "启用" ? 1 : 0);

					});

		});
	</script>


	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<script type="text/javascript">
			$(function() {

				$("#b1").click(function() {

					//ajax请求 ,data 从servlet中响应的结果 ""
					//
					$.get("ajax.do", function(data, status) {
						//console.log(data + "," + status);
						//$("#divUsers").html(data);
						
						//将data转换为json格式的"对象""
						var arr = JSON.parse(data);
						//才能用$.each
						$.each(arr, function(index,u) {
							console.log(u.userId+","+u.userName);
							
							<%-- <tr>
								<td><%=u.getUserId()%></td>
								<td><%=u.getUserName()%></td>
								<td><%=u.getUserSex()%></td>
								<td><%=u.getUserTel()%></td>
								<td><%=u.getUserAddress()%></td>
								<td><%=u.getUserLevel() == 0 ? "管理员" : "普通用户"%></td>
								<td><%=u.getUserState() == 0 ? "禁用" : "启用"%></td>
								<td class="col-md-2"><button href="#modal-container-534629"
										class="btn btn-link update" data-toggle="modal">修改</button>
									<button class="btn btn-link del">删除[按钮]</button> <a
									class="btn btn-link"
									href="us.do?userId=<%=u.getUserId()%>&op=del">删除[超链接]</a>
									<button class="btn btn-link">重置密码</button></td>
							</tr> --%>
							$("tbody").append("<tr><td>"+u.userId+"</td><td>"+u.userName+"</td><td>"+u.userSex+"</td><td>"+u.userTel+"</td><td>"+u.userAddress+"</td><td>"+(u.userLevel == 0 ? "管理员" : "普通用户")+"</td><td class='col-md-2'><button href='#modal-container-534629' class='btn btn-link update' data-toggle='modal'>修改</button><button class='btn btn-link del'>删除[按钮]</button> <a class='btn btn-link' href='us.do?userId="+u.userId+"&op=del'>删除[超链接]</a> <button class='btn btn-link'>重置密码</button></td>");
						});
					});
				});
			});
		</script>

</body>

</html>